<template>
  <div>
    <router-view></router-view>
    <!-- 数据查询 -->
    <el-card>
      <el-form class="pageQuery" label-position="top">
        <div class="queryItem" v-for="(queryItem, index) in queryItem" :key="index">
          <el-form-item :label="queryItem.label">
            <el-input v-if="queryItem.inputType == 'input'" :placeholder="queryItem.placeholder"
              v-model="queryInfo[queryItem.model]"></el-input>

            <el-select v-if="queryItem.inputType == 'select'" :placeholder="queryItem.placeholder"
              v-model="queryInfo[queryItem.model]">
              <el-option v-for="(item, index) in  option[queryItem.option]" :key="index" :label="item.name"
                :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <el-form-item>
          <el-button type="primary" @click="getListData">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 列表内容 -->
    <el-card class="contenCard">
      <div class="tableHeader">
        <el-button type="success" v-if="$api.buttonPower(72)" @click="drawer = true">新建任务</el-button>
      </div>
      <el-table :data="listData" v-loading="loading">
        <el-table-column v-for="(tableItem, index) in tableItem" :key="index" :label="tableItem.label"
          :prop="tableItem.prop">
          <template slot-scope="scope">
            <div v-html="$api.status.taskStatus(scope.row.status, option[$api.Enum.DicTypeTaskStatus])"
              v-if="tableItem.prop == 'status'"></div>
            <div v-else>{{ scope.row[tableItem.prop] }}</div>
          </template>
        </el-table-column>

        <el-table-column fixed="right" label="操作" width="150">
          <template slot-scope="scope">
            <div class="table-operation" v-if="$api.buttonPower(73)">
              <a class="routeButton" href="taskDetail?index=1" v-if="scope.row.status == $api.Enum.StatusDraft || scope.row.status == $api.Enum.StatusError || scope.row.status == $api.Enum.StatusDisable"
                @click.prevent="detailButton(scope.row, 1,)" type="primary">编辑</a>
              <a class="routeButton" href="taskDetail?index=2" @click.prevent="detailButton(scope.row, 2)">查看</a>
            </div>
          </template>
        </el-table-column>

        <template slot="empty">
          <myEmpty></myEmpty>
        </template>
      </el-table>
    </el-card>
    <el-drawer :visible.sync="drawer" title="新建任务" size="50%">
      <new-task></new-task>
    </el-drawer>

    <myPaging :queryInfo="queryInfo" :getListData="getListData"></myPaging>
  </div>
</template>

<script>
export default {
  data() {
    return {
      queryInfo: {
        type: "",
        status: "",
        title: "",
        page: 1,
        size: 10,
        total: 20
      },
      listData: [],
      option: [],
      drawer: false,
      queryItem: [
        {
          inputType: 'input',
          model: 'title',
          placeholder: '请输入任务名称',
          label: '任务名称',
          option: ''
        },
        {
          inputType: 'select',
          model: 'type',
          placeholder: '请选择任务类型',
          label: '任务类型',
          option: this.$api.Enum.DicTypeTaskType
        },
        {
          inputType: 'select',
          model: 'status',
          placeholder: '请选择任务状态',
          label: '任务状态',
          option: this.$api.Enum.DicTypeTaskStatus
        },
      ],
      tableItem: [
        {
          label: '任务名称',
          prop: 'title'
        },
        {
          label: '任务类型',
          prop: 'type_name'
        },
        {
          label: '总数',
          prop: 'total_number'
        },
        {
          label: '成功号码',
          prop: 'success_number'
        },
        {
          label: '失败号码',
          prop: 'error_number'
        },
        {
          label: '状态',
          prop: 'status'
        },
        {
          label: '审核时间',
          prop: 'audit_dt'
        },
        {
          label: '完成时间',
          prop: 'finish_dt'
        },
      ],
      loading: false
    };
  },
  methods: {
    getListData() {
      this.loading = true
      this.$api.task.taskList(this.queryInfo, res => {
        if (res.status) {
          this.listData = res.data.list;
          this.queryInfo.total = res.data.page.total;
          this.loading = false
        }
      });
    },
    detailButton(listData, index) {
      localStorage.setItem("taskId", listData.id);
      let routeData = this.$router.resolve({
        path: `taskDetail?index=${index}`
      });
      window.open(routeData.href, "_blank");
    },
    newTaskButton() {
      this.tagsSwitch = String(
        this.option[this.$api.Enum.DicTypeTaskType][0].id
      );
    }
  },
  mounted() {
    this.getListData();
    this.$api.foundation.dicListExtendCache(
      [
        this.$api.Enum.DicTypeCardType,
        this.$api.Enum.DicTypeOperator,
        this.$api.Enum.DicTypeChannelType,
        this.$api.Enum.DicTypeCardStatus,
        this.$api.Enum.DicTypeComboGroupList,
        this.$api.Enum.DicTypeTaskStatus,
        this.$api.Enum.DicTypeTaskType
      ],
      {},
      res => {
        this.option = res;
      }
    );
    this.$api.power(this.queryItem, this.tableItem, res => {
      this.queryItem = res.queryItem
      this.tableItem = res.tableItem
    })
  }
};
</script>

<style lang="less" scoped>
.contenCard {
  margin-top: 20px;
  min-height: 180px;
  overflow: auto;
}
</style>